<script setup lang="ts">
import {
  Drawer,
  Descriptions,
  DescriptionsItem,
  List,
  Comment,
  Button,
  FormItem,
  Textarea,
  Flex,
} from "ant-design-vue";
import { Service, MusicCommentOutput, MusicInfoOutput } from "../api";
import { getDurationText } from "../utils";
import { ref, watch } from "vue";
import { useStore } from "../stores";
const store = useStore();

const open = defineModel<boolean>("open", { required: true });
const props = defineProps<{
  musicInfo: MusicInfoOutput;
}>();
const dataSource = ref<MusicCommentOutput[]>([]);
const loadData = async () => {
  try {
    const result = await Service.findAllMusicComment({
      musicId: props.musicInfo.id,
    });
    dataSource.value = result.data;
  } catch (error) {}
};

const content = ref<string>("");
const submitting = ref(false);
const handleSubmit = async () => {
  submitting.value = true;
  try {
    await Service.createMusicComment({
      musicId: props.musicInfo.id,
      input: {
        content: content.value,
      },
    });
    content.value = "";
    loadData();
  } catch (error) {
  } finally {
    submitting.value = false;
  }
};

watch(
  () => props.musicInfo,
  () => {
    loadData();
    content.value = "";
  },
  {
    immediate: true,
  }
);
</script>
<template>
  <Drawer title="音乐详情" v-model:open="open" width="800" style="padding: 0px">
    <Flex vertical style="height: 100%">
      <Descriptions title="音乐详情" bordered :column="2">
        <DescriptionsItem label="音乐标题">{{
          props.musicInfo.title
        }}</DescriptionsItem>
        <DescriptionsItem label="艺术家">{{
          props.musicInfo.artist
        }}</DescriptionsItem>
        <DescriptionsItem label="专辑">{{
          props.musicInfo.album
        }}</DescriptionsItem>
        <DescriptionsItem label="时长">{{
          getDurationText(props.musicInfo.duration)
        }}</DescriptionsItem>
      </Descriptions>

      <List
        :data-source="dataSource"
        :header="`共${dataSource.length} 评论`"
        style="flex: 1; min-height: 0; overflow: auto; margin: 10px 0px"
        size="small"
        :locale="{
          emptyText: '暂无评论',
        }"
      >
        <template #renderItem="{ item }: { item: MusicCommentOutput }">
          <Comment
            :author="item.author"
            :datetime="item.createTime"
            :content="item.content"
          >
          </Comment>
        </template>
      </List>
      <Comment v-if="store.userInfo != undefined">
        <template #content>
          <FormItem>
            <Textarea
              v-model:value="content"
              :rows="2"
              placeholder="请文明友善发言"
            />
          </FormItem>
          <FormItem>
            <Button
              html-type="submit"
              :loading="submitting"
              type="primary"
              @click="handleSubmit"
            >
              添加评论
            </Button>
          </FormItem>
        </template>
      </Comment>
    </Flex>
  </Drawer>
</template>
